<template>
  <div class="flex">
    <el-avatar :src="currentCommunity.avatar" :size="100" shape="square" class="shrink-0" />
    <div class="m-l-16 flex direction-column">
      <div class="flex-1 flex align-items-center">
        <div>
          <div class="h3">{{ currentCommunity.title }}</div>
          <p>{{ currentCommunity.desc }}</p>
        </div>
      </div>
      <div class="flex">
        <div>关联的空间数： {{ currentCommunity.counts.spaces }}</div>
        <div class="m-l-16">资源总数： {{ currentCommunity.counts.docs }}</div>
        <div class="m-l-16">问题总数： {{ currentCommunity.counts.issues }}</div>
        <div class="m-l-16">社区人数： {{ currentCommunity.counts.members }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  name: 'Header', // 社区页头
  computed: {
    ...mapState(['currentCommunity']),
  },
};
</script>

<style></style>
